<template>
  <div>
    <KImageUploader ref="uploadRef" :file-list="fileList" :on-before-upload="handleBeforeUpload">
      <!-- 覆盖上传按钮 -->
      <!-- <template #default> 1111</template> -->
      <!-- 覆盖提示文本 -->
      <!-- <template #tip>
        cover tip
      </template> -->
    </KImageUploader>
    <div v-if="imageUrl?.length">
      获取到的URL： {{ imageUrl }}
    </div>
    <el-button @click="() => uploadRef?.getImgUrl()">手动获取URL</el-button>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { KImageUploader } from '@/components/k-image-uploader';
import { ElMessage } from 'element-plus';
defineOptions({ name: 'ImgUploaderDemo' });

const uploadRef = ref();
/** 获取上传后的图片的URL */
const imageUrl = computed(() => uploadRef.value?.getImgUrl());
/** 默认图片 */
const fileList = ref([
  {
    url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
    name: 'image.jpeg',
    status: 'finished'
  }
]);

const handleBeforeUpload = (file) => {
  console.log(file);
  const { size } = file;
  const isLt2M = size / 1024 / 1024 < 0.2;
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!');
  }
  return isLt2M;
};

</script>

